<template>
  <div class="commission-team bg-f8">
    <Navbar :title="navbarTitle" />
    <HeadTab v-model="tab_active" :tabs="tabs" @tab-change="onTab" />
    <List
      class="list"
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      :is-empty="isListEmpty"
      @load="loadList"
    >
      <van-cell-group>
        <van-cell class="item" v-for="(item,index) in list" :key="index">
          <div class="box">
            <div class="img">
              <img v-lazy="item.user_headimg" :key="item.user_headimg" pic-type="square" />
            </div>
            <div class="info">
              <van-row type="flex">
                <van-col span="12" class="name">{{item.member_name}}</van-col>
                <van-col span="12" class="level-name">{{item.distributor_level_name}}</van-col>
              </van-row>
              <van-row type="flex">
                <van-col span="12" class="text-nowrap">
                  团队人数：
                  <span>{{item.teamcount}}</span>人
                </van-col>
                <van-col span="12" class="text-nowrap">
                  {{$store.state.member.commissionSetText.commission}}：
                  <span>{{item.commission?item.commission:0}}</span>元
                </van-col>
              </van-row>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
    </List>
  </div>
</template>

<script>
import sfc from "@/utils/create";
import HeadTab from "@/components/HeadTab";
import { GET_TEAMLIST } from "@/api/commission";
import { list } from "@/mixins";
export default sfc({
  name: "commission-team",
  data() {
    return {
      tab_active: 0,
      tabs: [],
      params: {
        type: 1
      }
    };
  },
  mixins: [list],
  computed: {
    navbarTitle() {
      const { my_team } = this.$store.state.member.commissionSetText;
      let title = my_team;
      document.title = title;
      return title;
    }
  },
  mounted() {
    if (this.navbarTitle) {
      document.title = this.navbarTitle;
    }
    this.$store.dispatch("getCommissionInfo").then(data => {
      const {
        team1,
        team2,
        team3
      } = this.$store.state.member.commissionSetText;
      const arr = [];
      for (let i = 1; i <= data.distribution_pattern; i++) {
        if (i == 1) arr.push({ name: team1, type: 1 });
        if (i == 2) arr.push({ name: team2, type: 2 });
        if (i == 3) arr.push({ name: team3, type: 3 });
      }
      this.tabs = arr;
      this.loadList();
    });
  },
  methods: {
    onTab(index) {
      const $this = this;
      const type = $this.tabs[index].type;
      $this.params.type = type;
      $this.loadList("init");
    },
    loadList(init) {
      const $this = this;
      if (init && init === "init") {
        $this.initList();
      }
      GET_TEAMLIST($this.params)
        .then(({ data }) => {
          let list = data.data ? data.data : [];
          $this.pushToList(list, data.page_count, init);
        })
        .catch(() => {
          $this.loadError();
        });
    }
  },
  components: {
    HeadTab
  }
});
</script>

<style scoped>
.item .box {
  display: flex;
  align-items: center;
}

.item .img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.item .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.item .info {
  flex: 1;
}

.item .info .level-name {
  padding-left: 10px;
  color: #606266;
}
</style>
